<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用户登录</title>
    <link rel="stylesheet" th:href="@{/front/js/layui/css/layui.css}">
    <script th:src="@{/front/js/layui/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/front/css/login.css}">
</head>
<body id="page">
<div class="layui-card">
    <div class="layui-card-header" align="center">欢迎登录--云租房平台</div>
    <div class="layui-card-body">
        <form class="layui-form" id="user_login_action" th:action="@{/user/login}" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="input-div">
                    <i class="layui-icon layui-icon-username" style="font-size: 20px; color: #97ef83;"></i>
                    <input type="text" id="username_input" name="username" required lay-verify="required"
                           placeholder="请输入用户名"
                           autocomplete="true" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" id="mm">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <div class="input-div">
                    <i class="layui-icon layui-icon-password" style="font-size: 20px; color: #97ef83;"></i>
                    <input type="password" id="password_input" name="uPassword" required lay-verify="required"
                           placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-btn-container" style="text-align: center" >
                <button class="layui-btn layui-btn-radius layui-btn-danger" lay-event="forget">忘记密码</button>
                <button type="button" id="user_login" class="layui-btn layui-btn-radius">登录</button>
                <a class="layui-btn layui-btn-radius" th:href="@{/user/register}">注册</a>
                <a class="layui-btn layui-btn-radius" th:href="@{/admin/login}">管理员登录</a>
            </div>
        </form>
    </div>
</div>
<script th:inline="javascript" type="text/javascript">
    layui.use(['layer', 'jquery'], function () {
        const $ = layui.jquery;
        const layer = layui.layer;
        const contextPath = /*[[@{/}]]*/'';  //获取上下文路径
        const username_input = $('#username_input');
        const password_input = $('#password_input');
        const user_login = $('#user_login');

        //登录验证
       user_login.click(() => {
            let username = username_input.val();
            let password = password_input.val();

            if (username === "" || $.trim(username) === "") {
                username_input.focus();  //获取输入框焦点
                layer.tips('用户名不能为空!', username_input, {
                    tips: [1, '#d80f3e'] //还可配置颜色
                });
            } else if (password === "" || $.trim(password) === "") {
                password_input.focus();  //获取输入框焦点
                layer.tips('密码不能为空!', password_input, {
                    tips: [1, '#d80f3e'] //还可配置颜色
                });
            }else {
                $.post({
                    url: `${contextPath}user/userLoginVerify`,
                    data: {username: username, password: password},
                    success: function (msg) {
                        if (msg === "1") {
                            username_input.focus()
                            layer.tips("用户名不存在!",username_input,{
                                tips: [1, '#d80f3e']
                            })
                        } else if(msg === "2"){
                            password_input.focus()
                            layer.tips("密码错误!",password_input,{
                                tips: [1, '#d80f3e']
                            })
                        } else {
                            //加载层-默认风格
                            layer.load();
                            //等待1s跳转
                            setTimeout(function(){
                                //验证成功,提交表单
                                $('#user_login_action').submit();
                                layer.closeAll('loading');
                            }, 1000);
                        }
                    },
                });
            }

        });
    });
</script>

</body>
</html>